<template>
  <transition name="slide">
    <div class="scene-list">
      <page-header title="我的预约"></page-header>
      <ul class="scene-but" >
        <div class="sign" :class="{checked: checkedIndex == 0}" @click="select('', 0)">全部</div>
        <div class="sign" :class="{checked: checkedIndex == 1}" @click="select('0', 1)">未参加</div>
        <div class="sign" :class="{checked: checkedIndex == 2}" @click="select('1', 2)">已参加</div>
      </ul>
      <scroll class="list-content" :data="list" ref="scroll" :class="{'loading': loading}"
              :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash">
        <div >
          <div v-for="(item, index) in list" :key="index" class="detail">
            <ul :id="'scene_' + index" name="scene" class="scene-detail">
              <li>
                <span>活动名称</span>
                <p>{{item.bean.activity.name}}</p>
              </li>
              <li>
                <span>活动地点</span>
                <p>{{item.bean.activity.acplace}}</p>
              </li>
              <li>
                <span>预约时间</span>
                <p>{{item.bean.orderTime}}</p>
              </li>
              <li>
                <span>核销状态</span>
                <p>{{item.bean.isPinLabel}}</p>
              </li>
              <li v-if="item.bean.isPin == 0">
                <p><div class="revBtn" @click="sceneRevoke(item.bean)">撤销预约</div></p>
                <p><div class="pinBtn" @click="pin(item.bean)">核销</div></p>
              </li>
            </ul>
          </div>
          <p class="nomore" v-if="nomore">没有更多</p>
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Scroll from 'components/scroll/scroll'
  import * as exampleApi from 'api/example'
  import dictLable from 'components/dict-label'
  export default {
    components: {
      PageHeader,
      Scroll,
      dictLable
    },
    data () {
      return {
        list: [],
        page: 1,
        pageSize: 5,
        type: '',
        text: '',
        loading: false,
        nomore: false,
        scene: {},
        applyId: '',
        isPin: '',
        checkedIndex: 0
      }
    },
    created() {
      this.init()
    },
    methods: {
      _more() {
        if (this.nomore) {
          return
        }
        this.page++
        this.init()
      },
      _refash() {
        this.page = 1
        this.loading = true
        this.nomore = false
        this.init()
      },
      init() {
        this.applyId = this.$route.params.applyId
        exampleApi.modePost('/api/public/wz/activity/getMyOrder', ({
          memberId: sessionStorage.getItem('studentId'),
          isPin: this.isPin,
          pageNo: this.page,
          pageSize: this.pageSize
        })).then(res => {
          if (res.data.code === '0') {
            res.data.data.rows.forEach(item => {
              if (item.bean.isPin === '1') {
                item.bean.isPinLabel = '已核销'
              } else {
                item.bean.isPinLabel = '未核销'
              }
            })
            if (res.data.data.rows.length < this.pageSize) {
              this.nomore = true
            }
            if (this.page === 1) {
              this.list = res.data.data.rows
            } else if (this.page > 1) {
              this.list = this.list.concat(res.data.data.rows)
            }
          };
        }).catch(error => {
          console.log(error)
        })
      },
      pin(item) {
        this.$router.push({
          path: '/activity/pin' + item.id
        })
      },
      sceneRevoke(item) {
        if (confirm('确认撤销？')) {
          exampleApi.modePost('/api/public/wz/activity/sceneRevoke', ({
            orderId: item.id
          })).then(res => {
            alert(res.data.msg)
            if (res.data.code === '0') {
              this.init()
            };
          })
        }
      },
      select (isPin, index) {
        this.isPin = isPin
        this.page = 1
        this.checkedIndex = index
        this.init()
      }
    }
  }
</script>

<style lang="less" scoped>
  .scene-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
  .list-content{
    height:calc(~"100% - 160px");
    overflow: hidden;
  .detail{
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    margin-top: 20px;
  }
  }
  }

  .scene-detail{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding:0 20px;
    box-sizing: border-box;
    background-color: #fff;
  li{
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #cccccc;
    display:flex;
    justify-content:space-between;
    align-items: center;
  span{
    font-size: 28px;
    color: #419eff;
  }
  p{
    font-size: 26px;
    color: #999999;
  }
  }
  }
  .pinBtn{
    width: 220px;
    height: 50px;
    background-image: linear-gradient(#f5ab04, #f5ab04);
    border-radius: 6px;
    line-height: 50px;
    text-align: center;
    color: #fff;
  }
  .revBtn{
     width: 220px;
     height: 50px;
     background-image: linear-gradient(#ff4141, #ff4141);
     border-radius: 6px;
     line-height: 50px;
     text-align: center;
     color: #fff;
   }

  .scene-but{
    width: 100%;
    height: 90px;
    display: flex;
    margin-bottom: 5px;
  .sign{
    font-family: '';
    width: 100%;
    background-color: #ffffff;
    font-size: 32px;
    line-height: 90px;
    color: #999999;
    text-align: center;
  }
  .checked{
    color: #f55e5e;
    border-bottom: 5px solid#f55e5e;
  }
  li{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top: 1px solid#cccccc;
    border-left: 1px solid#cccccc;
  &:nth-child(1) {
     border-left: none;
   }
  span{
    margin-top: 8px;
    font-size: 20px;
    color: #999;
  }
  img{
    width: 26px;
    height: 26px;
  }
  }
  }
  .nomore{
    font-size: 22px;
    color: #999999;
    text-align: center;
    padding-bottom: 20px;
  }
</style>
